<template>
  <div class="list-echarts one" style="padding-bottom: 25px;border-bottom: 1px dashed #50759f;">
    <div class="top">
      <div class="stud">学生报名数据</div>
      <!-- <div :class="['tab',actvietoplist==index?'stuactive':'']" v-for="(item,index) in toplist" @click="toplistclick(index)">{{item}}</div> -->
      <div style="margin-right: 20px;border-radius: 5px;overflow: hidden;position: relative;" class="blo">
        <el-date-picker
          style="width: 125px!important;"
          :editable="false"
          v-model="time[0]"
          @change="timefun()"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="开始日期">
        </el-date-picker>
        <div style="background-color: #ffb900;display: flex;align-items: center;justify-content: center;color: white;position: absolute;left: 44%;top: 36%;z-index: 99;">一</div>
        <el-date-picker
          style="width: 125px!important;"
          v-model="time[1]"
          :editable="false"
          @change="timefun()"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="结束日期">
        </el-date-picker>
        <div style="width: 0;height: 0;border: 5px solid transparent;border-top: 5px solid white;position: absolute;right: 5px;top: 17px;"></div>
      </div>
    </div>
   <!-- <div class="cla">
      <div :class="['class',actviebtmlist==index?'claactive':'']" v-for="(item,index) in btmlist" @click="btmlistclick(index)">{{item}}</div>
    </div> -->
    <div style="display: flex;align-items: center;justify-content: flex-end;">
      <div class="allstu allstu0">
        <el-select v-model="actviebtmlist" placeholder="请选择" @change="xueduan()">
          <el-option
            v-for="(item,index) in btmlist"
            :key="index"
            :label="item"
            :value="index">
          </el-option>
        </el-select>
      </div>
      <div class="allstu">
        <el-select v-model="value" placeholder="请选择" @change="registration()">
          <el-option
            v-for="item in options"
            :key="item.school_id"
            :label="item.name"
            :value="item.school_id">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="numbox">
      <div class="allnum" style="margin-bottom: 10px;">
        <div class="pop">总人数</div>
        <div class="rightnum">
          <div class="imgnum" v-for="(item,index) in all_number" :key="index">{{item}}</div>
        </div>
      </div>
      <div class="allnum" style="margin-bottom: 10px;">
        <div class="pop">学生参与人数</div>
        <div class="rightnum">
          <div class="imgnum" v-for="(item,index) in course_number" :key="index">{{item}}</div>
        </div>
      </div>
      <div class="allnum">
        <div class="pop">学生报名人次</div>
        <div class="rightnum">
           <div class="imgnum" v-for="(item,index) in renci" :key="index">{{item}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { school,bming } from '@/api/user.js'
  export default {
    name: 'registrationdata',
    components: {},
    props: ["qyvalue"],
    data() {
      return {
        time: [],
        options: [],
        value: '',
        toplist: ['周','月','学期','学年'],
        actvietoplist: 0,
        btmlist: ['全学段','小学','初中'],
        actviebtmlist: 0,
        num: {},
        all_number: [],
        course_number: [],
        renci: []
      }
    },
    computed: {},
    watch: {
      qyvalue:{
        deep:true,
        immediate: true,
        handler(newVal,oldVal){
          if (newVal!='') {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var bfmonth = date.getMonth();
            var nowdata = date.getDate();
            var time = []
            var now = year+'-'+month+'-'+nowdata
            var bfnow = year+'-'+bfmonth+'-'+nowdata
            // time.push(bfnow)
            time.push('2023-9-1')
            time.push(now)
            this.time = time
            this.schoolfun()
          }
        }
      }
    },
    created() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var bfmonth = date.getMonth();
      var nowdata = date.getDate();
      var time = []
      var now = year+'-'+month+'-'+nowdata
      var bfnow = year+'-'+bfmonth+'-'+nowdata
      // time.push(bfnow)
      time.push('2023-9-1')
      time.push(now)
      this.time = time
    },
    mounted() {
    },
    methods: {
      schoolfun() {
        var that = this,
        params = {
          school_area_id: this.qyvalue,
          school_stage_id: 0
        }
        if (this.actviebtmlist == 1) {
          params.school_stage_id = 3
        } else if (this.actviebtmlist == 2) {
          params.school_stage_id = 4
        }
        school(params).then(res => {
          var obj = {school_id: 0,name: '全部学校'}
          res.data.unshift(obj)
          this.options = res.data
          this.value = res.data[0].school_id
          this.registration()
        })
      },
      toplistclick(e) {
        this.actvietoplist = e
        this.registration()
      },
      btmlistclick(e) {
        this.actviebtmlist = e
        this.registration()
      },
      xueduan() {
        this.schoolfun()
      },
      timefun() {
        this.registration()
      },
      registration() {
        var that = this
        var params = {
          // date_period: this.actvietoplist+1,
          learning_stage: this.actviebtmlist+2,
          school_id: this.value,
          school_area_id: this.qyvalue,
          start_date: '',
          end_date: ''
        }
        if(params.learning_stage ==2) {
          params.learning_stage = 0
        }
        if (this.time!='') {
          params.start_date = this.time[0]
          params.end_date = this.time[1]
        }
        bming(params).then(res => {
          var all_number = res.data.all_number.toString().split('')
          var course_number = res.data.course_number.toString().split('')
          var renci = res.data.renci.toString().split('')
          if (all_number.length < 6) {
            var num = 6-all_number.length
            for (var i = 0; i < num; i++) {
              all_number.unshift(0)
            }
          }
          if (course_number.length < 6) {
            var num = 6-course_number.length
            for (var i = 0; i < num; i++) {
              course_number.unshift(0)
            }
          }
          if (renci.length < 6) {
            var num = 6-renci.length
            for (var i = 0; i < num; i++) {
              renci.unshift(0)
            }
          }
          this.all_number = all_number
          this.course_number = course_number
          this.renci = renci
        })
      },
    }
  }
</script>
<style scoped lang="less">
  .list-echarts{
    height: 100%;
    width: 100%;
    .block{
      width: 230px;
    }
    .top{
      height: 40px;
      width: 100%;
      background-image: url('../../assets/images/onetop.png');
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      .stud{
        font-size: 18px;
        font-weight: 600;
        color: white;
        margin-right: 10px;
        cursor:pointer;
      }
      .tab{
        font-size: 13px;
        color: white;
        width: 40px;
        height: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .tab:hover{
        cursor:pointer;
      }
      .stuactive{
        background: linear-gradient(to right,#ff8e00,#ffab00,#ffb500);
        border-radius: 5Px;
        font-weight: bold;
      }
    }
    .cla{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 290px;
      box-sizing: border-box;
      color: white;
      font-size: 15px;
      margin: 10px auto;
      cursor:pointer;
      .class{
        width: 25%;
      }
      .claactive{
        line-height: 36px;
        font-weight: bold;
        border-bottom: 5px solid #ffb800;
      }
    }
    .allstu0{
      width: 110Px!important;
      background-image: url('../../assets/images/onetop-5.png')!important;
    }
    .allstu{
      width: 210Px;
      height: 30Px;
      margin-top: 15px;
      background-image: url('../../assets/images/onetop-4.png');
      background-repeat: no-repeat;
      margin: 15px 20px 15px 0;
      display: flex;
      align-items: center;
    }
    .numbox{
      padding-right: 45px;
      box-sizing: border-box;
    }
    .allnum{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      color: #dfefff;
      font-size: 16px;
      font-weight: 600;
      .pop{
        margin-right: 25px;
      }
      .rightnum{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .imgnum{
          margin-right: 8px;
          text-align: center;
          line-height: 48px;
          width: 32px;
          height: 48px;
          background-image: url('../../assets/images/onetop-3.png');
          background-repeat: no-repeat;
          background-position: center;
        }
      }
    }
  }
</style>
